<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ex" uri="/WEB-INF/tld/showInformation.tld"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>薪酬管理系统--员工</title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/resources/css/styleSheet.css">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossorigin="anonymous">
    <link
            href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script
            src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.0.0/dist/css/bootstrap-theme.min.css" rel="stylesheet">

</head>
<body style="padding-top: 10%;background-size: cover;">
<ex:Banner/>
<!-- 这里之后改一下 -->
<c:if test="${not empty employee}">

    <!--页面中心内容-->
    <div class="row">
        <div class="col-sm-2">
            <!--菜单组件：手风琴 panel-group容器-->
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <!--面板-->
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                               aria-expanded="true" aria-controls="collapseOne">
                                <span class="glyphicon glyphicon-home" aria-hidden="true"></span> 员工信息
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <!--嵌套列表组-->
                            <ul class="list-group">
                                <li class="list-group-item"><a href="${pageContext.request.contextPath}/employee/employeeInfo"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> &nbsp;查看员工信息</a></li>
                                <li class="list-group-item"><a href="${pageContext.request.contextPath}/employee/salary"><span class="glyphicon glyphicon-yen" aria-hidden="true"></span> &nbsp;查看薪资信息</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--中心内容-->
        <div class="col-sm-10">
            <!--标签页-->
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"><a
                            href="${pageContext.request.contextPath}/employee/employeeInfo">查看员工信息</a></a>
                    </li>
                    <li role="presentation" class="active"><a href="#profile" aria-controls="profile" role="tab"
                                                              data-toggle="tab">查看薪资信息</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" id="home">
                        <!--栅格布局-->
                        <!--用户表格-->
                        <div class="row" style="margin-top: 70px">
                            <div class="col-sm-10 col-sm-offset-1">
                                <h1>个人信息</h1>
                                <div style="height: 50px">
                                </div>
                                <img src="${pageContext.request.contextPath}/resources/images/employeePhoto.png"
                                     class="col-sm-3" alt="text"
                                     style="width: 200px;">
                                <div class="col-sm-7">
                                </div>
                                <div class="col-sm-3">
                                    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                            data-target="#photo">
                                        更改照片
                                    </button>
                                </div>
                                <!-- Modal -->
                                <form action="employees/upload" method="post" enctype="multipart/form-data">
                                    <div class="modal fade" id="photo" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close"><span aria-hidden="true">&times;</span>
                                                    </button>
                                                    <h4 class="modal-title" id="myModalLabel">请选择照片，支持格式为.png 。。。</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <label for="photo">选择照片</label>
                                                    <input type="file" name="employeePhoto">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">确认上传</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <table class="table table-bordered table-hover table-striped">
                                    <tr>
                                        <th>基本信息项</th>
                                        <th>信息</th>
                                    </tr>
                                    <tr>
                                        <td> 用户名</td>
                                        <td><c:out value="${employeeInfo.username}"/>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>身份</td>
                                        <td>员工</td>

                                    </tr>
                                    <tr>
                                        <td>姓名</td>
                                        <td>
                                            <c:out value="${employeeInfo.fullname}"/></td>
                                    </tr>
                                    <tr>
                                        <td> 邮箱</td>
                                        <td><c:out value="${employeeInfo.email}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 电话号码</td>
                                        <td><c:out value="${employeeInfo.phoneNumber }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 出生日期</td>
                                        <td><c:out value="${employee.birthday }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 部门</td>
                                        <td><c:out value="${employeeInfo.departmentName }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 级别</td>
                                        <td><c:out value="${employeeInfo.levelName }"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td> 银行卡号</td>
                                        <td><c:out value="${employeeInfo.bankAccount }"/>
                                        </td>
                                    </tr>
                                </table>

                                <button type="button" class="btn btn-primary btn-lg" data-toggle="modal"
                                        data-target="#myModal">
                                    修改基本信息
                                </button>
                                <form name="changeForm" method="post" action="index.jsp">
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                         aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">

                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close"><span aria-hidden="true">&times;</span>
                                                    </button>
                                                    <h4 class="modal-title">基本信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <form>
                                                        <div class="form-group">
                                                            <label for="username">用户名</label>
                                                            <input type="text" class="form-control" id="username"
                                                                   name="username"
                                                                   placeholder="${employeeInfo.username}"
                                                                   value="${employeeInfo.username}">

                                                        </div>
                                                        <div class="form-group">
                                                            <label for="exampleInputPassword1">密码</label>
                                                            <input type="password" class="form-control"
                                                                   id="exampleInputPassword1" name="password"
                                                                   placeholder="密码" required>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="name">姓名</label>
                                                            <input type="text" class="form-control" id="name"
                                                                   name="fullname"
                                                                   placeholder="${employeeInfo.fullname}"
                                                                   value="${employeeInfo.fullname}">

                                                        </div>
                                                        <div class="form-group">
                                                            <label for="exampleInputEmail1">邮箱</label>
                                                            <input type="email" class="form-control"
                                                                   id="exampleInputEmail1" name="email"
                                                                   placeholder="${employeeInfo.email}"
                                                                   value="${employeeInfo.email}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="birthday">出生日期</label>
                                                            <input type="date" class="form-control" id="birthday"
                                                                   name="birthday"
                                                                   placeholder="${employeeInfo.birthday}"
                                                                   value="${employeeInfo.birthday}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="phoneNo">电话号码</label>
                                                            <input type="tel" class="form-control" id="phoneNo"
                                                                   name="phoneNumber"
                                                                   placeholder="${employeeInfo.phoneNumber}"
                                                                   value="${employeeInfo.phoneNumber}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="bankcard">银行卡号</label>
                                                            <input type="text" class="form-control" id="bankcard"
                                                                   name="bankAccount"
                                                                   placeholder="${employeeInfo.bankcard}"
                                                                   value="${employeeInfo.bankAccount}">
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                                        Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Save changes</button>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>

                    </div>
                    <div role="tabpanel" class="tab-pane  active" id="profile">
                        <!--栅格布局-->
                        <!--用户表格-->
                        <div class="row" style="margin-top: 70px">
                            <div class="col-sm-10 col-sm-offset-1">
                                <div class="col-sm-7">
                                    <form action="${pageContext.request.contextPath}/employee/findSalaryByYearAndMonth"
                                          method="get" class="form-inline my-2 my-lg-0">
                                        <h4>搜索日期：</h4><br><br>
                                        <input class="form-control mr-sm-2 col-md-2" type="search" name="year"
                                               placeholder="年份" aria-label="Search"> 年 &nbsp;&nbsp;&nbsp;
                                        <select class="selectpicker show-tick form-control" name="month"
                                                data-live-search="true">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            <option>6</option>
                                            <option>7</option>
                                            <option>8</option>
                                            <option>9</option>
                                            <option>10</option>
                                            <option>11</option>
                                            <option>12</option>
                                        </select> &nbsp;月
                                        &nbsp;&nbsp;&nbsp;
                                        <button class="btn btn btn-primary btn-group-sm my-2 my-sm-0" type="submit">搜索
                                        </button>
                                    </form>
                                </div>
                                <div class="col-sm-3">
                                    <form action="${pageContext.request.contextPath}/employee/salary" method="get"
                                          class="form-inline my-2 my-lg-0">
                                        <button class="btn btn btn-primary btn-group-sm my-2 my-sm-0" type="submit">
                                            显示全部工资信息
                                        </button>
                                    </form>
                                </div>

                                <div style="height: 60px">

                                </div>
                                <table class="table table-bordered table-hover table-striped">
                                    <tr>
                                        <th>序号</th>
                                        <th>发放时间</th>
                                        <th>岗位工资</th>
                                        <th>绩效工资</th>
                                        <th>工龄工资</th>
                                        <th>津贴补助</th>
                                        <th>个人所得税</th>
                                        <th>总工资</th>
                                        <th>税后总工资</th>
                                    </tr>
                                    <c:forEach items="${salaryList.items}" var="salaryItem"
                                               varStatus="ItemLoopCount">
                                        <tr>
                                            <td>${ItemLoopCount.count}</td>
                                            <td>${salaryItem.paymentDate}</td>
                                            <td>${salaryItem.positionSalary}</td>
                                            <td>${salaryItem.performanceSalary}</td>
                                            <td>${salaryItem.senioritySalary}</td>
                                            <td>${salaryItem.allowance}</td>
                                            <td>${salaryItem.taxation}</td>
                                            <td>${salaryItem.totalSalaryAmount}</td>
                                            <td>${salaryItem.actualPayAmount}</td>
                                        </tr>
                                    </c:forEach>
                                </table>

                                <!--分页工具栏-->

                                    <ul class="col-md-12">
                                        <div class="col-md-offset-4 col-md-2 ">
                                            <c:if test="${salaryList.currentPageNo == 1}">
                                                <ul class="pager">
                                                    <li class="disabled">上一页</li>
                                                </ul>
                                            </c:if>
                                            <c:if test="${salaryList.currentPageNo != 1}">
                                                <ul class="pager">
                                                    <li><a href="<c:url value="${pageContext.request.contextPath}/employee/salary?pageNo=${salaryList.currentPageNo-1}" />">上一页</a></li>
                                                </ul>
                                            </c:if>
                                        </div>

                                        <div class="col-md-4">
                                            <nav aria-label="Page navigation">
                                                <ul class="pagination">
                                                    <c:forEach begin="1" end="${salaryList.totalPageCount}" var="i">
                                                        <c:if test="${salaryList.currentPageNo == i}">
                                                            <li class="disabled">
                                                                <a href="${pageContext.request.contextPath}/employee/salary?pageNo=${i}">${i}</a>
                                                            </li>
                                                        </c:if>
                                                        <c:if test="${salaryList.currentPageNo != i}">
                                                            <li>
                                                                <a href="${pageContext.request.contextPath}/employee/salary?pageNo=${i}">${i}</a>
                                                            </li>
                                                        </c:if>
                                                    </c:forEach>
                                                </ul>
                                            </nav>
                                        </div>

                                        <div class="col-md-2">
                                            <c:if test="${salaryList.currentPageNo == salaryList.totalPageCount}">
                                                <ul class="pager">
                                                    <li class="disabled">下一页</li>
                                                </ul>
                                            </c:if>
                                            <c:if test="${salaryList.currentPageNo != salaryList.totalPageCount}">
                                                <ul class="pager">
                                                    <li><a href="<c:url value="${pageContext.request.contextPath}/employee/salary?pageNo=${salaryList.currentPageNo+1}" />">下一页</a></li>
                                                </ul>
                                            </c:if>
                                        </div>
                                    </ul>

                                <div class="col-md-6">

                                </div>
                                <div>
                                    每页${salaryList.pageSize}条工资信息，共${salaryList.totalCount}条工资信息
                                </div>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</c:if>

<div style="height: 300px">

</div>
<!--引入标签，统一的尾部信息-->
<ex:Footer/>

<!-- jQuery and JavaScript Bundle with Popper -->
<script
        src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
        crossorigin="anonymous"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>

